<template>
	<view class="content">
		<view v-if="address.length!=0" @click="addAdress">
			<view class="addres">
				<view class="addres_name">
					<view class="">{{address.userName}}</view>
					<view class="">{{address.telNumber}}</view>
				</view>
				<view class="addres_title">
					{{address.cityName}}{{address.countyName}}{{address.detailInfo}}
				</view>
			</view>
		</view>
		<view v-else>
			<view class="content_button">
				<button type="primary" @click="addAdress">添加收货地址</button>
			</view>
		</view>
		<!-- 内容 -->
		<view class="content_cart">
			<view class="content_title">
				购物车
			</view>
			<view v-if="shopList.length!=0">
				<view class="content_top">
					<view class="shop_item"  v-for="item in shopList">
						<checkbox-group class="check" @click="changCheck(item.goods_id)">
							<checkbox :checked="item.isCheck"></checkbox>
						</checkbox-group>
						<view class="shop_image">
							<image :src="item.goods_small_logo" mode="widthFix"></image>
						</view>
						<view class="shop_name">
							<view class="name">{{item.goods_name}}</view>
							<view class="shop_grop">
								<view class="price">￥{{item.goods_price}}</view>
								<view class="shop_num">
									<view class="shop_num_deti" @click="handaddNum(item.goods_id)">+</view>
									<view class="shop_num_num">{{item.num}}</view>
									<view class="shop_num_deti" @click="handdownNum(item.goods_id)">-</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view v-else style="text-align: center;margin-top: 50rpx; font-size: 35rpx;color:red">没有商品哦</view>
			<!-- 底部导航 -->
			<view class="content_btn">
				<view class="left">
					<view class="check">
						<checkbox-group name="">
							<checkbox :checked="allCheck" @click="changeALLCheck">全选</checkbox>
						</checkbox-group>
					</view>
					<view class="total">
						<view>合计:￥{{totalPrice}}</view>
						<text>包运费</text>
					</view>
				</view>
				<view class="shop_add">
					<view class="alladd" @click="handPay()">
						结算（{{totalNum}}）
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import cartVue from './cart.vue'
	export default {
		data() {
			return {
				shopList:[],
				allCheck:'',
				totalPrice:0,
				totalNum:0,
				res:'',
				address:""
			}
		},
		onLoad() {
			
		},
		// 监听页面的加载
		onShow() {
			const address=uni.getStorageSync('address')||[]
			const shopList=uni.getStorageSync('cart')||[]
			this.shopList=shopList
			this.address=address
			//计算全选
			// const allCheck=shopList.length?shopList.every(v=>v.isCheck):false
			this.setCart(shopList);
		},
		methods: {
			// 添加地址
			addAdress(){
		     uni.chooseAddress({
		     	success(res) {
		     		console.log(res)
					uni.setStorageSync("address",res);
		     	}
		     })  
		     
		},
		changCheck(res){
			// 获取数组
			let shopList=this.shopList;
			// 修改商品对象
			// this.res=res
			let index=shopList.findIndex(v=>v.goods_id===res)
			// 选中转态
			shopList[index].isCheck=!shopList[index].isCheck
			
			this.setCart(shopList);
		},
		// 全选
		changeALLCheck(){
			let shopList=this.shopList;
			let allChack=this.allCheck;
			// 取反
			allChack=!allChack;
			shopList.forEach(v=>v.isCheck=allChack)
			// 修改数据
			this.setCart(shopList);
		},
		// 设置数量的加减
		handaddNum(res){
			let id=res;
			const shopList=this.shopList
			const index=shopList.findIndex(v=>v.goods_id===id);
			//修改数据
			shopList[index].num+=1
			this.setCart(shopList)
		},
		//减少
		handdownNum(res){
			let id=res;
			const shopList=this.shopList
			const index=shopList.findIndex(v=>v.goods_id===id);
			//修改数据
			if(shopList[index].num===1){
			
				uni.showModal({
					title:'提示',
					content:'确定删除吗',
					success:(res)=>{
						if(res.confirm){
							shopList.splice(index,1);
							this.setCart(shopList);
						}
						if(res.cancel){
							
						}
					}
				})
			}else{
				shopList[index].num+=-1
				this.setCart(shopList)
			}
		},
		// 结算
		handPay(){
			if(this.totalPrice==0){
				uni.showToast({
					icon:'none',
					title:"购物车位空"
				})
			}else if(this.address.length!=0){
				uni.showToast({
					icon:'none',
					title:"地址不能为空"
				})
			}else{
				uni.navigateTo({
					url:'/pages/pay/pay'
				})
			}
		},
		// 设置购物车状态
		setCart(shopList){
			let allCheck=true;
			
			let totalPrice=0;
			let totalNum=0;
			shopList.forEach(v=>{
				if(v.isCheck){
					totalPrice+=v.num*v.goods_price;
					totalNum+=v.num;
				}else{
					allCheck=false
				}
			})
			allCheck=shopList.length!=0?allCheck:false
			this.shopList=shopList;
			this.totalPrice=totalPrice;
			this.totalNum=totalNum;
			this.allCheck=allCheck;
			uni.setStorageSync("cart",shopList);
		}
		}
	}
</script>

<style lang="scss">
	.addres{
		   height: 90rpx;
		   width: 100%;
		   border: 5rpx solid #eee;
		   .addres_name{
			   display: flex;
			   justify-content: space-between;
			    padding: 0rpx 20rpx;
		   }
		   .addres_title{
			   padding-left: 20rpx;
		   }
	}
   .content_button{
	   height:80rpx;
	   width: 100%;
	    margin: 10rpx 0rpx;
	    border-bottom:1rpx solid gainsboro ;
		padding: 20rpx 0rpx;
	   button{
		   width: 50%;
		   height: 80rpx;
           text-align: center;
	   }
   }
   .content_cart{
	   .content_title{
		   height: 80rpx;
		   background-color: #fff;
		   padding-left: 20rpx;
		   font-size: 35rpx;
		   color: $shop-color;
		   font-weight: bold;
		   line-height: 80rpx;
		   border-bottom: 5rpx solid gainsboro;
	   }
   }
   .content_top{
   	   margin-bottom: 120rpx;
   }
   .shop_item{
	   margin-top: 5rpx;
	   height: 250rpx;
	   display: flex;
	   border-bottom: 1px solid gainsboro;
	   padding-bottom: 20rpx;
	   .check{
		   padding-left: 10rpx;
		   display: flex;
		   align-items: center;
		   flex: 1;
	   }
	   .shop_image{
		  display: flex;
		  align-items: center;
		   flex: 2;
		   image{
			   border-radius: 20rpx;
			   width: 100%;
		   }
	   }
	   .shop_name{
		   display: flex;
		   flex-direction: column;
		   justify-content: space-between;
		   .shop_grop{
			   display: flex;
			   flex-direction: row;
			   justify-content: space-between;
		   }
		   .name{
			   padding: 0rpx 10rpx;
			   display: -webkit-box;
			   overflow: hidden;
			   -webkit-box-orient:vertical;
			   -webkit-line-clamp:2;
		   }
		   .price{
			   font-size: 35rpx;
			   color: $shop-color;
			   font-weight: bold;
		   }
		   .shop_num{
			   width: 150rpx;
			   display: flex;
			   justify-content: space-around;
			   align-items: center;
			   margin-right: 20rpx;
		   }
		   .shop_num_deti{
			   width: 45rpx;
			   height: 45rpx;
			   line-height: 45rpx;
			   text-align: center;
			   border: 1rpx solid gray;
		   }
		   flex: 4;
	   }
	   
   }
   .content_btn{
	   position: fixed;
	   /* #ifdef H5 */
	   bottom: 90rpx;
	   /*#endif  */
	   /* #ifdef MP-WEIXIN*/
	   bottom: 0;
	   /*#endif  */
	   width: 100%;
	   left: 0;
	   height: 90rpx;
	   display: flex;
	   border-top: 1rpx solid gainsboro;
	   background-color: #fff;
	   .left{
		   display: flex;
		   justify-content: space-between;
		   flex: 4;
	   }
	   .check{
		   padding-left: 10rpx;
	       line-height: 70rpx;
	   }
	   .total{
		   text{
			   font-size: 20rpx;
			   color:gray;
		   }
		   view{
			   color: $shop-color;
		   }
		   display: flex;
		   flex-direction: column;
		   align-items: center;
	   }
	   .shop_add{
		   display: flex;
		   justify-content: center;
		   color: #fff;
		   align-items: center;
		   background-color: red;
		   flex: 2;
	   }
   }
</style>
